<template>
<div>
    <div class="red"></div>
<div>鼠标坐标</div>
<div>X坐标:{{x}}</div>
<div>Y坐标:{{y}}</div>
<div>数字累加{{count}}</div> 
<button @click="add">累加</button> <button @click="remove">清零</button>
</div>  
</template>

<script>
import { reactive, toRefs,onMounted, onUnmounted, ref } from 'vue';
const useMouse =()=>{
        //1，记录鼠标坐标
    //2，申明一个响应式数据，包含x，y
    const mouse = reactive({
        x:0,
        y:0
    })
    const move = (e) =>{
    // console.log(e.pageX);
    // console.log(e.pageY);
    mouse.x=e.pageX
    mouse.y=e.pageY

    }
    onMounted(()=>{
        document.addEventListener('mousemove',move)
    })
    onUnmounted(()=>{
        document.removeEventListener('mousemove',move)
    })
  return mouse
}
export default {
name:'App',
setup() {
  const mouse=useMouse()
    //数字的累加
    const count= ref(0)
    const add =()=>{
        count.value++
    }
    const remove =()=>{
        count.value=0
    }
    return {
        ...toRefs(mouse),
        count,
        add,
        remove
    }
},
}
</script>

<style>
/* .red{
    position: fixed;
    background-color: red;
    width: 20px;
    height: 20px;
} */
</style>